<%--
  Created by IntelliJ IDEA.
  User: 14232
  Date: 2020/5/3
  Time: 23:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="sidebar.jsp"></jsp:include>
<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>

    <div id="sidebar" class="sidebar                  responsive                    ace-save-state" data-sidebar="true"
         data-sidebar-scroll="true" data-sidebar-hover="true">
        <script type="text/javascript">
            try {
                ace.settings.loadState('sidebar')
            } catch (e) {
            }
        </script>

        <div class="sidebar-shortcuts" id="sidebar-shortcuts">
            <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
                <button class="btn btn-success">
                    <i class="ace-icon fa fa-signal"></i>
                </button>

                <button class="btn btn-info">
                    <i class="ace-icon fa fa-pencil"></i>
                </button>

                <button class="btn btn-warning">
                    <i class="ace-icon fa fa-users"></i>
                </button>

                <button class="btn btn-danger">
                    <i class="ace-icon fa fa-cogs"></i>
                </button>
            </div>

            <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
                <span class="btn btn-success"></span>

                <span class="btn btn-info"></span>

                <span class="btn btn-warning"></span>

                <span class="btn btn-danger"></span>
            </div>
        </div><!-- /.sidebar-shortcuts -->

        <ul class="nav nav-list" style="top: 0px;">
            <li class="active">
                <a href="index.html">
                    <i class="menu-icon fa fa-tachometer"></i>
                    <span class="menu-text"> Dashboard </span>
                </a>

                <b class="arrow"></b>
            </li>

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-desktop"></i>
                    <span class="menu-text">
								UI &amp; Elements
							</span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i>

                            Layouts
                            <b class="arrow fa fa-angle-down"></b>
                        </a>

                        <b class="arrow"></b>

                        <ul class="submenu">
                            <li class="">
                                <a href="top-menu.html">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    Top Menu
                                </a>

                                <b class="arrow"></b>
                            </li>

                            <li class="">
                                <a href="two-menu-1.html">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    Two Menus 1
                                </a>

                                <b class="arrow"></b>
                            </li>

                            <li class="">
                                <a href="two-menu-2.html">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    Two Menus 2
                                </a>

                                <b class="arrow"></b>
                            </li>

                            <li class="">
                                <a href="mobile-menu-1.html">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    Default Mobile Menu
                                </a>

                                <b class="arrow"></b>
                            </li>

                            <li class="">
                                <a href="mobile-menu-2.html">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    Mobile Menu 2
                                </a>

                                <b class="arrow"></b>
                            </li>

                            <li class="">
                                <a href="mobile-menu-3.html">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    Mobile Menu 3
                                </a>

                                <b class="arrow"></b>
                            </li>
                        </ul>
                    </li>

                    <li class="">
                        <a href="typography.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Typography
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="elements.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Elements
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="buttons.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Buttons &amp; Icons
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="content-slider.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Content Sliders
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="treeview.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Treeview
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="jquery-ui.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            jQuery UI
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="nestable-list.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Nestable Lists
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i>

                            Three Level Menu
                            <b class="arrow fa fa-angle-down"></b>
                        </a>

                        <b class="arrow"></b>

                        <ul class="submenu">
                            <li class="">
                                <a href="#">
                                    <i class="menu-icon fa fa-leaf green"></i>
                                    Item #1
                                </a>

                                <b class="arrow"></b>
                            </li>

                            <li class="">
                                <a href="#" class="dropdown-toggle">
                                    <i class="menu-icon fa fa-pencil orange"></i>

                                    4th level
                                    <b class="arrow fa fa-angle-down"></b>
                                </a>

                                <b class="arrow"></b>

                                <ul class="submenu">
                                    <li class="">
                                        <a href="#">
                                            <i class="menu-icon fa fa-plus purple"></i>
                                            Add Product
                                        </a>

                                        <b class="arrow"></b>
                                    </li>

                                    <li class="">
                                        <a href="#">
                                            <i class="menu-icon fa fa-eye pink"></i>
                                            View Products
                                        </a>

                                        <b class="arrow"></b>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-list"></i>
                    <span class="menu-text"> Tables </span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="tables.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Simple &amp; Dynamic
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="jqgrid.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            jqGrid plugin
                        </a>

                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-pencil-square-o"></i>
                    <span class="menu-text"> Forms </span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="form-elements.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Form Elements
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="form-elements-2.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Form Elements 2
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="form-wizard.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Wizard &amp; Validation
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="wysiwyg.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Wysiwyg &amp; Markdown
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="dropzone.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Dropzone File Upload
                        </a>

                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>

            <li class="">
                <a href="widgets.html">
                    <i class="menu-icon fa fa-list-alt"></i>
                    <span class="menu-text"> Widgets </span>
                </a>

                <b class="arrow"></b>
            </li>

            <li class="">
                <a href="calendar.html">
                    <i class="menu-icon fa fa-calendar"></i>

                    <span class="menu-text">
								Calendar

								<span class="badge badge-transparent tooltip-error" title=""
                                      data-original-title="2 Important Events">
									<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i>
								</span>
							</span>
                </a>

                <b class="arrow"></b>
            </li>

            <li class="">
                <a href="gallery.html">
                    <i class="menu-icon fa fa-picture-o"></i>
                    <span class="menu-text"> Gallery </span>
                </a>

                <b class="arrow"></b>
            </li>

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-tag"></i>
                    <span class="menu-text"> More Pages </span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="profile.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            User Profile
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="inbox.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Inbox
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="pricing.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Pricing Tables
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="invoice.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Invoice
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="timeline.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Timeline
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="search.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Search Results
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="email.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Email Templates
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="login.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Login &amp; Register
                        </a>

                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-file-o"></i>

                    <span class="menu-text">
								Other Pages

								<span class="badge badge-primary">5</span>
							</span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="faq.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            FAQ
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="error-404.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Error 404
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="error-500.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Error 500
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="grid.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Grid
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="blank.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            Blank Page
                        </a>

                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
        </ul><!-- /.nav-list -->

        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-save-state ace-icon fa fa-angle-double-left"
               data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
    </div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">Home</a>
                    </li>
                    <li class="active">Dashboard</li>
                </ul><!-- /.breadcrumb -->

                <div class="nav-search" id="nav-search">
                    <form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input"
                                           id="nav-search-input" autocomplete="off">
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
                    </form>
                </div><!-- /.nav-search -->
            </div>

            <div class="page-content">
                <div class="ace-settings-container" id="ace-settings-container">
                    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                        <i class="ace-icon fa fa-cog bigger-130"></i>
                    </div>

                    <div class="ace-settings-box clearfix" id="ace-settings-box">
                        <div class="pull-left width-50">
                            <div class="ace-settings-item">
                                <div class="pull-left">
                                    <select id="skin-colorpicker" class="hide">
                                        <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                                        <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                                        <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                                        <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                                    </select>
                                    <div class="dropdown dropdown-colorpicker"><a data-toggle="dropdown"
                                                                                  class="dropdown-toggle"><span
                                            class="btn-colorpicker" style="background-color:#438EB9"></span></a>
                                        <ul class="dropdown-menu dropdown-caret">
                                            <li><a class="colorpick-btn selected" style="background-color:#438EB9;"
                                                   data-color="#438EB9"></a></li>
                                            <li><a class="colorpick-btn" style="background-color:#222A2D;"
                                                   data-color="#222A2D"></a></li>
                                            <li><a class="colorpick-btn" style="background-color:#C6487E;"
                                                   data-color="#C6487E"></a></li>
                                            <li><a class="colorpick-btn" style="background-color:#D0D0D0;"
                                                   data-color="#D0D0D0"></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <span>&nbsp; Choose Skin</span>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state"
                                       id="ace-settings-navbar" autocomplete="off">
                                <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state"
                                       id="ace-settings-sidebar" autocomplete="off">
                                <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state"
                                       id="ace-settings-breadcrumbs" autocomplete="off">
                                <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl"
                                       autocomplete="off">
                                <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state"
                                       id="ace-settings-add-container" autocomplete="off">
                                <label class="lbl" for="ace-settings-add-container">
                                    Inside
                                    <b>.container</b>
                                </label>
                            </div>
                        </div><!-- /.pull-left -->

                        <div class="pull-left width-50">
                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover"
                                       autocomplete="off">
                                <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact"
                                       autocomplete="off">
                                <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight"
                                       autocomplete="off">
                                <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
                            </div>
                        </div><!-- /.pull-left -->
                    </div><!-- /.ace-settings-box -->
                </div><!-- /.ace-settings-container -->

                <div class="page-header">
                    <h1>
                        Dashboard
                        <small>
                            <i class="ace-icon fa fa-angle-double-right"></i>
                            overview &amp; stats
                        </small>
                    </h1>
                </div><!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="alert alert-block alert-success">
                            <button type="button" class="close" data-dismiss="alert">
                                <i class="ace-icon fa fa-times"></i>
                            </button>

                            <i class="ace-icon fa fa-check green"></i>

                            Welcome to
                            <strong class="green">
                                Ace
                                <small>(v1.4)</small>
                            </strong>,
                            лёгкий, многофункциональный и простой в использовании шаблон для админки на bootstrap 3.3.6.
                            Загрузить исходники с <a href="https://github.com/bopoda/ace">github</a> (with minified ace
                            js/css files).
                        </div>

                        <div class="row">
                            <div class="space-6"></div>

                            <div class="col-sm-7 infobox-container">
                                <div class="infobox infobox-green">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-comments"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number">32</span>
                                        <div class="infobox-content">comments + 2 reviews</div>
                                    </div>

                                    <div class="stat stat-success">8%</div>
                                </div>

                                <div class="infobox infobox-blue">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-twitter"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number">11</span>
                                        <div class="infobox-content">new followers</div>
                                    </div>

                                    <div class="badge badge-success">
                                        +32%
                                        <i class="ace-icon fa fa-arrow-up"></i>
                                    </div>
                                </div>

                                <div class="infobox infobox-pink">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-shopping-cart"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number">8</span>
                                        <div class="infobox-content">new orders</div>
                                    </div>
                                    <div class="stat stat-important">4%</div>
                                </div>

                                <div class="infobox infobox-red">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-flask"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number">7</span>
                                        <div class="infobox-content">experiments</div>
                                    </div>
                                </div>

                                <div class="infobox infobox-orange2">
                                    <div class="infobox-chart">
                                        <span class="sparkline" data-values="196,128,202,177,154,94,100,170,224"><canvas
                                                width="44" height="33"
                                                style="display: inline-block; width: 44px; height: 33px; vertical-align: top;"></canvas></span>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number">6,251</span>
                                        <div class="infobox-content">pageviews</div>
                                    </div>

                                    <div class="badge badge-success">
                                        7.2%
                                        <i class="ace-icon fa fa-arrow-up"></i>
                                    </div>
                                </div>

                                <div class="infobox infobox-blue2">
                                    <div class="infobox-progress">
                                        <div class="easy-pie-chart percentage" data-percent="42" data-size="46"
                                             style="height: 46px; width: 46px; line-height: 45px;">
                                            <span class="percent">42</span>%
                                            <canvas height="57" width="57" style="height: 46px; width: 46px;"></canvas>
                                        </div>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-text">traffic used</span>

                                        <div class="infobox-content">
                                            <span class="bigger-110">~</span>
                                            58GB remaining
                                        </div>
                                    </div>
                                </div>

                                <div class="space-6"></div>

                                <div class="infobox infobox-green infobox-small infobox-dark">
                                    <div class="infobox-progress">
                                        <div class="easy-pie-chart percentage" data-percent="61" data-size="39"
                                             style="height: 39px; width: 39px; line-height: 38px;">
                                            <span class="percent">61</span>%
                                            <canvas height="48" width="48" style="height: 39px; width: 39px;"></canvas>
                                        </div>
                                    </div>

                                    <div class="infobox-data">
                                        <div class="infobox-content">Task</div>
                                        <div class="infobox-content">Completion</div>
                                    </div>
                                </div>

                                <div class="infobox infobox-blue infobox-small infobox-dark">
                                    <div class="infobox-chart">
                                        <span class="sparkline" data-values="3,4,2,3,4,4,2,2"><canvas width="39"
                                                                                                      height="19"
                                                                                                      style="display: inline-block; width: 39px; height: 19px; vertical-align: top;"></canvas></span>
                                    </div>

                                    <div class="infobox-data">
                                        <div class="infobox-content">Earnings</div>
                                        <div class="infobox-content">$32,000</div>
                                    </div>
                                </div>

                                <div class="infobox infobox-grey infobox-small infobox-dark">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-download"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <div class="infobox-content">Downloads</div>
                                        <div class="infobox-content">1,205</div>
                                    </div>
                                </div>
                            </div>

                            <div class="vspace-12-sm"></div>

                            <div class="col-sm-5">
                                <div class="widget-box">
                                    <div class="widget-header widget-header-flat widget-header-small">
                                        <h5 class="widget-title">
                                            <i class="ace-icon fa fa-signal"></i>
                                            Traffic Sources
                                        </h5>

                                        <div class="widget-toolbar no-border">
                                            <div class="inline dropdown-hover">
                                                <button class="btn btn-minier btn-primary">
                                                    This Week
                                                    <i class="ace-icon fa fa-angle-down icon-on-right bigger-110"></i>
                                                </button>

                                                <ul class="dropdown-menu dropdown-menu-right dropdown-125 dropdown-lighter dropdown-close dropdown-caret">
                                                    <li class="active">
                                                        <a href="#" class="blue">
                                                            <i class="ace-icon fa fa-caret-right bigger-110">&nbsp;</i>
                                                            This Week
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a href="#">
                                                            <i class="ace-icon fa fa-caret-right bigger-110 invisible">&nbsp;</i>
                                                            Last Week
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a href="#">
                                                            <i class="ace-icon fa fa-caret-right bigger-110 invisible">&nbsp;</i>
                                                            This Month
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a href="#">
                                                            <i class="ace-icon fa fa-caret-right bigger-110 invisible">&nbsp;</i>
                                                            Last Month
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main">
                                            <div id="piechart-placeholder"
                                                 style="width: 90%; min-height: 150px; padding: 0px; position: relative;">
                                                <canvas class="flot-base" width="342" height="187"
                                                        style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 274px; height: 150px;"></canvas>
                                                <canvas class="flot-overlay" width="342" height="187"
                                                        style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 274px; height: 150px;"></canvas>
                                                <div class="legend">
                                                    <div style="position: absolute; width: 90px; height: 112px; top: 15px; right: -30px; background-color: rgb(255, 255, 255); opacity: 0.85;"></div>
                                                    <table style="position:absolute;top:15px;right:-30px;;font-size:smaller;color:#545454">
                                                        <tbody>
                                                        <tr>
                                                            <td class="legendColorBox">
                                                                <div style="border:1px solid;padding:1px">
                                                                    <div style="width:4px;height:0;border:5px solid #68BC31;overflow:hidden"></div>
                                                                </div>
                                                            </td>
                                                            <td class="legendLabel">social networks</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="legendColorBox">
                                                                <div style="border:1px solid;padding:1px">
                                                                    <div style="width:4px;height:0;border:5px solid #2091CF;overflow:hidden"></div>
                                                                </div>
                                                            </td>
                                                            <td class="legendLabel">search engines</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="legendColorBox">
                                                                <div style="border:1px solid;padding:1px">
                                                                    <div style="width:4px;height:0;border:5px solid #AF4E96;overflow:hidden"></div>
                                                                </div>
                                                            </td>
                                                            <td class="legendLabel">ad campaigns</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="legendColorBox">
                                                                <div style="border:1px solid;padding:1px">
                                                                    <div style="width:4px;height:0;border:5px solid #DA5430;overflow:hidden"></div>
                                                                </div>
                                                            </td>
                                                            <td class="legendLabel">direct traffic</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="legendColorBox">
                                                                <div style="border:1px solid null;padding:1px">
                                                                    <div style="width:4px;height:0;border:5px solid #FEE074;overflow:hidden"></div>
                                                                </div>
                                                            </td>
                                                            <td class="legendLabel">other</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                            <div class="hr hr8 hr-double"></div>

                                            <div class="clearfix">
                                                <div class="grid3">
															<span class="grey">
																<i class="ace-icon fa fa-facebook-square fa-2x blue"></i>
																&nbsp; likes
															</span>
                                                    <h4 class="bigger pull-right">1,255</h4>
                                                </div>

                                                <div class="grid3">
															<span class="grey">
																<i class="ace-icon fa fa-twitter-square fa-2x purple"></i>
																&nbsp; tweets
															</span>
                                                    <h4 class="bigger pull-right">941</h4>
                                                </div>

                                                <div class="grid3">
															<span class="grey">
																<i class="ace-icon fa fa-pinterest-square fa-2x red"></i>
																&nbsp; pins
															</span>
                                                    <h4 class="bigger pull-right">1,050</h4>
                                                </div>
                                            </div>
                                        </div><!-- /.widget-main -->
                                    </div><!-- /.widget-body -->
                                </div><!-- /.widget-box -->
                            </div><!-- /.col -->
                        </div><!-- /.row -->

                        <div class="hr hr32 hr-dotted"></div>

                        <div class="row">
                            <div class="col-sm-5">
                                <div class="widget-box transparent">
                                    <div class="widget-header widget-header-flat">
                                        <h4 class="widget-title lighter">
                                            <i class="ace-icon fa fa-star orange"></i>
                                            Popular Domains
                                        </h4>

                                        <div class="widget-toolbar">
                                            <a href="#" data-action="collapse">
                                                <i class="ace-icon fa fa-chevron-up"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main no-padding">
                                            <table class="table table-bordered table-striped">
                                                <thead class="thin-border-bottom">
                                                <tr>
                                                    <th>
                                                        <i class="ace-icon fa fa-caret-right blue"></i>name
                                                    </th>

                                                    <th>
                                                        <i class="ace-icon fa fa-caret-right blue"></i>price
                                                    </th>

                                                    <th class="hidden-480">
                                                        <i class="ace-icon fa fa-caret-right blue"></i>status
                                                    </th>
                                                </tr>
                                                </thead>

                                                <tbody>
                                                <tr>
                                                    <td>internet.com</td>

                                                    <td>
                                                        <small>
                                                            <s class="red">$29.99</s>
                                                        </small>
                                                        <b class="green">$19.99</b>
                                                    </td>

                                                    <td class="hidden-480">
                                                        <span class="label label-info arrowed-right arrowed-in">on sale</span>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>online.com</td>

                                                    <td>
                                                        <b class="blue">$16.45</b>
                                                    </td>

                                                    <td class="hidden-480">
                                                        <span class="label label-success arrowed-in arrowed-in-right">approved</span>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>newnet.com</td>

                                                    <td>
                                                        <b class="blue">$15.00</b>
                                                    </td>

                                                    <td class="hidden-480">
                                                        <span class="label label-danger arrowed">pending</span>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>web.com</td>

                                                    <td>
                                                        <small>
                                                            <s class="red">$24.99</s>
                                                        </small>
                                                        <b class="green">$19.95</b>
                                                    </td>

                                                    <td class="hidden-480">
																	<span class="label arrowed">
																		<s>out of stock</s>
																	</span>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>domain.com</td>

                                                    <td>
                                                        <b class="blue">$12.00</b>
                                                    </td>

                                                    <td class="hidden-480">
                                                        <span class="label label-warning arrowed arrowed-right">SOLD</span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div><!-- /.widget-main -->
                                    </div><!-- /.widget-body -->
                                </div><!-- /.widget-box -->
                            </div><!-- /.col -->

                            <div class="col-sm-7">
                                <div class="widget-box transparent">
                                    <div class="widget-header widget-header-flat">
                                        <h4 class="widget-title lighter">
                                            <i class="ace-icon fa fa-signal"></i>
                                            Sale Stats
                                        </h4>

                                        <div class="widget-toolbar">
                                            <a href="#" data-action="collapse">
                                                <i class="ace-icon fa fa-chevron-up"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-4">
                                            <div id="sales-charts"
                                                 style="width: 100%; height: 220px; padding: 0px; position: relative;">
                                                <canvas class="flot-base" width="582" height="275"
                                                        style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 466px; height: 220px;"></canvas>
                                                <div class="flot-text"
                                                     style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
                                                    <div class="flot-x-axis flot-x1-axis xAxis x1Axis"
                                                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; max-width: 91px; top: 203px; left: 30px; text-align: center;">
                                                            0.0
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; max-width: 91px; top: 203px; left: 97px; text-align: center;">
                                                            1.0
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; max-width: 91px; top: 203px; left: 165px; text-align: center;">
                                                            2.0
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; max-width: 91px; top: 203px; left: 233px; text-align: center;">
                                                            3.0
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; max-width: 91px; top: 203px; left: 301px; text-align: center;">
                                                            4.0
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; max-width: 91px; top: 203px; left: 369px; text-align: center;">
                                                            5.0
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; max-width: 91px; top: 203px; left: 437px; text-align: center;">
                                                            6.0
                                                        </div>
                                                    </div>
                                                    <div class="flot-y-axis flot-y1-axis yAxis y1Axis"
                                                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 190px; left: 1px; text-align: right;">
                                                            -2.000
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 166px; left: 1px; text-align: right;">
                                                            -1.500
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 143px; left: 1px; text-align: right;">
                                                            -1.000
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 119px; left: 1px; text-align: right;">
                                                            -0.500
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 95px; left: 4px; text-align: right;">
                                                            0.000
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 71px; left: 4px; text-align: right;">
                                                            0.500
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 48px; left: 4px; text-align: right;">
                                                            1.000
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 24px; left: 4px; text-align: right;">
                                                            1.500
                                                        </div>
                                                        <div class="flot-tick-label tickLabel"
                                                             style="position: absolute; top: 0px; left: 4px; text-align: right;">
                                                            2.000
                                                        </div>
                                                    </div>
                                                </div>
                                                <canvas class="flot-overlay" width="582" height="275"
                                                        style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 466px; height: 220px;"></canvas>
                                                <div class="legend">
                                                    <div style="position: absolute; width: 62px; height: 67px; top: 13px; right: 13px; background-color: rgb(255, 255, 255); opacity: 0.85;"></div>
                                                    <table style="position:absolute;top:13px;right:13px;;font-size:smaller;color:#545454">
                                                        <tbody>
                                                        <tr>
                                                            <td class="legendColorBox">
                                                                <div style="border:1px solid #ccc;padding:1px">
                                                                    <div style="width:4px;height:0;border:5px solid rgb(237,194,64);overflow:hidden"></div>
                                                                </div>
                                                            </td>
                                                            <td class="legendLabel">Domains</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="legendColorBox">
                                                                <div style="border:1px solid #ccc;padding:1px">
                                                                    <div style="width:4px;height:0;border:5px solid rgb(175,216,248);overflow:hidden"></div>
                                                                </div>
                                                            </td>
                                                            <td class="legendLabel">Hosting</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="legendColorBox">
                                                                <div style="border:1px solid #ccc;padding:1px">
                                                                    <div style="width:4px;height:0;border:5px solid rgb(203,75,75);overflow:hidden"></div>
                                                                </div>
                                                            </td>
                                                            <td class="legendLabel">Services</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div><!-- /.widget-main -->
                                    </div><!-- /.widget-body -->
                                </div><!-- /.widget-box -->
                            </div><!-- /.col -->
                        </div><!-- /.row -->

                        <div class="hr hr32 hr-dotted"></div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="widget-box transparent" id="recent-box">
                                    <div class="widget-header">
                                        <h4 class="widget-title lighter smaller">
                                            <i class="ace-icon fa fa-rss orange"></i>RECENT
                                        </h4>

                                        <div class="widget-toolbar no-border">
                                            <ul class="nav nav-tabs" id="recent-tab">
                                                <li class="active">
                                                    <a data-toggle="tab" href="#task-tab">Tasks</a>
                                                </li>

                                                <li>
                                                    <a data-toggle="tab" href="#member-tab">Members</a>
                                                </li>

                                                <li>
                                                    <a data-toggle="tab" href="#comment-tab">Comments</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-4">
                                            <div class="tab-content padding-8">
                                                <div id="task-tab" class="tab-pane active">
                                                    <h4 class="smaller lighter green">
                                                        <i class="ace-icon fa fa-list"></i>
                                                        Sortable Lists
                                                    </h4>

                                                    <ul id="tasks" class="item-list ui-sortable">
                                                        <li class="item-orange clearfix ui-sortable-handle">
                                                            <label class="inline">
                                                                <input type="checkbox" class="ace">
                                                                <span class="lbl"> Answering customer questions</span>
                                                            </label>

                                                            <div class="pull-right easy-pie-chart percentage"
                                                                 data-size="30" data-color="#ECCB71" data-percent="42"
                                                                 style="height: 30px; width: 30px; line-height: 29px;">
                                                                <span class="percent">42</span>%
                                                                <canvas height="37" width="37"
                                                                        style="height: 30px; width: 30px;"></canvas>
                                                            </div>
                                                        </li>

                                                        <li class="item-red clearfix ui-sortable-handle">
                                                            <label class="inline">
                                                                <input type="checkbox" class="ace">
                                                                <span class="lbl"> Fixing bugs</span>
                                                            </label>

                                                            <div class="pull-right action-buttons">
                                                                <a href="#" class="blue">
                                                                    <i class="ace-icon fa fa-pencil bigger-130"></i>
                                                                </a>

                                                                <span class="vbar"></span>

                                                                <a href="#" class="red">
                                                                    <i class="ace-icon fa fa-trash-o bigger-130"></i>
                                                                </a>

                                                                <span class="vbar"></span>

                                                                <a href="#" class="green">
                                                                    <i class="ace-icon fa fa-flag bigger-130"></i>
                                                                </a>
                                                            </div>
                                                        </li>

                                                        <li class="item-default clearfix ui-sortable-handle">
                                                            <label class="inline">
                                                                <input type="checkbox" class="ace">
                                                                <span class="lbl"> Adding new features</span>
                                                            </label>

                                                            <div class="pull-right pos-rel dropdown-hover">
                                                                <button class="btn btn-minier bigger btn-primary">
                                                                    <i class="ace-icon fa fa-cog icon-only bigger-120"></i>
                                                                </button>

                                                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-caret dropdown-close dropdown-menu-right">
                                                                    <li>
                                                                        <a href="#" class="tooltip-success"
                                                                           data-rel="tooltip" title=""
                                                                           data-original-title="Mark&nbsp;as&nbsp;done">
																					<span class="green">
																						<i class="ace-icon fa fa-check bigger-110"></i>
																					</span>
                                                                        </a>
                                                                    </li>

                                                                    <li>
                                                                        <a href="#" class="tooltip-error"
                                                                           data-rel="tooltip" title=""
                                                                           data-original-title="Delete">
																					<span class="red">
																						<i class="ace-icon fa fa-trash-o bigger-110"></i>
																					</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </li>

                                                        <li class="item-blue clearfix ui-sortable-handle">
                                                            <label class="inline">
                                                                <input type="checkbox" class="ace">
                                                                <span class="lbl"> Upgrading scripts used in template</span>
                                                            </label>
                                                        </li>

                                                        <li class="item-grey clearfix ui-sortable-handle">
                                                            <label class="inline">
                                                                <input type="checkbox" class="ace">
                                                                <span class="lbl"> Adding new skins</span>
                                                            </label>
                                                        </li>

                                                        <li class="item-green clearfix ui-sortable-handle">
                                                            <label class="inline">
                                                                <input type="checkbox" class="ace">
                                                                <span class="lbl"> Updating server software up</span>
                                                            </label>
                                                        </li>

                                                        <li class="item-pink clearfix ui-sortable-handle">
                                                            <label class="inline">
                                                                <input type="checkbox" class="ace">
                                                                <span class="lbl"> Cleaning up</span>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>

                                                <div id="member-tab" class="tab-pane">
                                                    <div class="clearfix">
                                                        <div class="itemdiv memberdiv">
                                                            <div class="user">
                                                                <img alt="Bob Doe's avatar"
                                                                     src="assets/images/avatars/user.jpg">
                                                            </div>

                                                            <div class="body">
                                                                <div class="name">
                                                                    <a href="#">Bob Doe</a>
                                                                </div>

                                                                <div class="time">
                                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                                    <span class="green">20 min</span>
                                                                </div>

                                                                <div>
                                                                    <span class="label label-warning label-sm">pending</span>

                                                                    <div class="inline position-relative">
                                                                        <button class="btn btn-minier btn-yellow btn-no-border dropdown-toggle"
                                                                                data-toggle="dropdown"
                                                                                data-position="auto">
                                                                            <i class="ace-icon fa fa-angle-down icon-only bigger-120"></i>
                                                                        </button>

                                                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                                                            <li>
                                                                                <a href="#" class="tooltip-success"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Approve">
																							<span class="green">
																								<i class="ace-icon fa fa-check bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>

                                                                            <li>
                                                                                <a href="#" class="tooltip-warning"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Reject">
																							<span class="orange">
																								<i class="ace-icon fa fa-times bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>

                                                                            <li>
                                                                                <a href="#" class="tooltip-error"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Delete">
																							<span class="red">
																								<i class="ace-icon fa fa-trash-o bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="itemdiv memberdiv">
                                                            <div class="user">
                                                                <img alt="Joe Doe's avatar"
                                                                     src="assets/images/avatars/avatar2.png">
                                                            </div>

                                                            <div class="body">
                                                                <div class="name">
                                                                    <a href="#">Joe Doe</a>
                                                                </div>

                                                                <div class="time">
                                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                                    <span class="green">1 hour</span>
                                                                </div>

                                                                <div>
                                                                    <span class="label label-warning label-sm">pending</span>

                                                                    <div class="inline position-relative">
                                                                        <button class="btn btn-minier btn-yellow btn-no-border dropdown-toggle"
                                                                                data-toggle="dropdown"
                                                                                data-position="auto">
                                                                            <i class="ace-icon fa fa-angle-down icon-only bigger-120"></i>
                                                                        </button>

                                                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                                                            <li>
                                                                                <a href="#" class="tooltip-success"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Approve">
																							<span class="green">
																								<i class="ace-icon fa fa-check bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>

                                                                            <li>
                                                                                <a href="#" class="tooltip-warning"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Reject">
																							<span class="orange">
																								<i class="ace-icon fa fa-times bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>

                                                                            <li>
                                                                                <a href="#" class="tooltip-error"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Delete">
																							<span class="red">
																								<i class="ace-icon fa fa-trash-o bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="itemdiv memberdiv">
                                                            <div class="user">
                                                                <img alt="Jim Doe's avatar"
                                                                     src="assets/images/avatars/avatar.png">
                                                            </div>

                                                            <div class="body">
                                                                <div class="name">
                                                                    <a href="#">Jim Doe</a>
                                                                </div>

                                                                <div class="time">
                                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                                    <span class="green">2 hour</span>
                                                                </div>

                                                                <div>
                                                                    <span class="label label-warning label-sm">pending</span>

                                                                    <div class="inline position-relative">
                                                                        <button class="btn btn-minier btn-yellow btn-no-border dropdown-toggle"
                                                                                data-toggle="dropdown"
                                                                                data-position="auto">
                                                                            <i class="ace-icon fa fa-angle-down icon-only bigger-120"></i>
                                                                        </button>

                                                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                                                            <li>
                                                                                <a href="#" class="tooltip-success"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Approve">
																							<span class="green">
																								<i class="ace-icon fa fa-check bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>

                                                                            <li>
                                                                                <a href="#" class="tooltip-warning"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Reject">
																							<span class="orange">
																								<i class="ace-icon fa fa-times bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>

                                                                            <li>
                                                                                <a href="#" class="tooltip-error"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Delete">
																							<span class="red">
																								<i class="ace-icon fa fa-trash-o bigger-110"></i>
																							</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="itemdiv memberdiv">
                                                            <div class="user">
                                                                <img alt="Alex Doe's avatar"
                                                                     src="assets/images/avatars/avatar5.png">
                                                            </div>

                                                            <div class="body">
                                                                <div class="name">
                                                                    <a href="#">Alex Doe</a>
                                                                </div>

                                                                <div class="time">
                                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                                    <span class="green">3 hour</span>
                                                                </div>

                                                                <div>
                                                                    <span class="label label-danger label-sm">blocked</span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="itemdiv memberdiv">
                                                            <div class="user">
                                                                <img alt="Bob Doe's avatar"
                                                                     src="assets/images/avatars/avatar2.png">
                                                            </div>

                                                            <div class="body">
                                                                <div class="name">
                                                                    <a href="#">Bob Doe</a>
                                                                </div>

                                                                <div class="time">
                                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                                    <span class="green">6 hour</span>
                                                                </div>

                                                                <div>
                                                                    <span class="label label-success label-sm arrowed-in">approved</span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="itemdiv memberdiv">
                                                            <div class="user">
                                                                <img alt="Susan's avatar"
                                                                     src="assets/images/avatars/avatar3.png">
                                                            </div>

                                                            <div class="body">
                                                                <div class="name">
                                                                    <a href="#">Susan</a>
                                                                </div>

                                                                <div class="time">
                                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                                    <span class="green">yesterday</span>
                                                                </div>

                                                                <div>
                                                                    <span class="label label-success label-sm arrowed-in">approved</span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="itemdiv memberdiv">
                                                            <div class="user">
                                                                <img alt="Phil Doe's avatar"
                                                                     src="assets/images/avatars/avatar4.png">
                                                            </div>

                                                            <div class="body">
                                                                <div class="name">
                                                                    <a href="#">Phil Doe</a>
                                                                </div>

                                                                <div class="time">
                                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                                    <span class="green">2 days ago</span>
                                                                </div>

                                                                <div>
                                                                    <span class="label label-info label-sm arrowed-in arrowed-in-right">online</span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="itemdiv memberdiv">
                                                            <div class="user">
                                                                <img alt="Alexa Doe's avatar"
                                                                     src="assets/images/avatars/avatar1.png">
                                                            </div>

                                                            <div class="body">
                                                                <div class="name">
                                                                    <a href="#">Alexa Doe</a>
                                                                </div>

                                                                <div class="time">
                                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                                    <span class="green">3 days ago</span>
                                                                </div>

                                                                <div>
                                                                    <span class="label label-success label-sm arrowed-in">approved</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="center">
                                                        <i class="ace-icon fa fa-users fa-2x green middle"></i>

                                                        &nbsp;
                                                        <a href="#" class="btn btn-sm btn-white btn-info">
                                                            See all members &nbsp;
                                                            <i class="ace-icon fa fa-arrow-right"></i>
                                                        </a>
                                                    </div>

                                                    <div class="hr hr-double hr8"></div>
                                                </div><!-- /.#member-tab -->

                                                <div id="comment-tab" class="tab-pane">
                                                    <div class="comments ace-scroll" style="position: relative;">
                                                        <div class="scroll-track" style="display: none;">
                                                            <div class="scroll-bar"></div>
                                                        </div>
                                                        <div class="scroll-content" style="max-height: 300px;">
                                                            <div class="itemdiv commentdiv">
                                                                <div class="user">
                                                                    <img alt="Bob Doe's Avatar"
                                                                         src="assets/images/avatars/avatar.png">
                                                                </div>

                                                                <div class="body">
                                                                    <div class="name">
                                                                        <a href="#">Bob Doe</a>
                                                                    </div>

                                                                    <div class="time">
                                                                        <i class="ace-icon fa fa-clock-o"></i>
                                                                        <span class="green">6 min</span>
                                                                    </div>

                                                                    <div class="text">
                                                                        <i class="ace-icon fa fa-quote-left"></i>
                                                                        Lorem ipsum dolor sit amet, consectetur
                                                                        adipiscing elit. Quisque commodo massa sed ipsum
                                                                        porttitor facilisis …
                                                                    </div>
                                                                </div>

                                                                <div class="tools">
                                                                    <div class="inline position-relative">
                                                                        <button class="btn btn-minier bigger btn-yellow dropdown-toggle"
                                                                                data-toggle="dropdown">
                                                                            <i class="ace-icon fa fa-angle-down icon-only bigger-120"></i>
                                                                        </button>

                                                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                                                            <li>
                                                                                <a href="#" class="tooltip-success"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Approve">
																						<span class="green">
																							<i class="ace-icon fa fa-check bigger-110"></i>
																						</span>
                                                                                </a>
                                                                            </li>

                                                                            <li>
                                                                                <a href="#" class="tooltip-warning"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Reject">
																						<span class="orange">
																							<i class="ace-icon fa fa-times bigger-110"></i>
																						</span>
                                                                                </a>
                                                                            </li>

                                                                            <li>
                                                                                <a href="#" class="tooltip-error"
                                                                                   data-rel="tooltip" title=""
                                                                                   data-original-title="Delete">
																						<span class="red">
																							<i class="ace-icon fa fa-trash-o bigger-110"></i>
																						</span>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="itemdiv commentdiv">
                                                                <div class="user">
                                                                    <img alt="Jennifer's Avatar"
                                                                         src="assets/images/avatars/avatar1.png">
                                                                </div>

                                                                <div class="body">
                                                                    <div class="name">
                                                                        <a href="#">Jennifer</a>
                                                                    </div>

                                                                    <div class="time">
                                                                        <i class="ace-icon fa fa-clock-o"></i>
                                                                        <span class="blue">15 min</span>
                                                                    </div>

                                                                    <div class="text">
                                                                        <i class="ace-icon fa fa-quote-left"></i>
                                                                        Lorem ipsum dolor sit amet, consectetur
                                                                        adipiscing elit. Quisque commodo massa sed ipsum
                                                                        porttitor facilisis …
                                                                    </div>
                                                                </div>

                                                                <div class="tools">
                                                                    <div class="action-buttons bigger-125">
                                                                        <a href="#">
                                                                            <i class="ace-icon fa fa-pencil blue"></i>
                                                                        </a>

                                                                        <a href="#">
                                                                            <i class="ace-icon fa fa-trash-o red"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="itemdiv commentdiv">
                                                                <div class="user">
                                                                    <img alt="Joe's Avatar"
                                                                         src="assets/images/avatars/avatar2.png">
                                                                </div>

                                                                <div class="body">
                                                                    <div class="name">
                                                                        <a href="#">Joe</a>
                                                                    </div>

                                                                    <div class="time">
                                                                        <i class="ace-icon fa fa-clock-o"></i>
                                                                        <span class="orange">22 min</span>
                                                                    </div>

                                                                    <div class="text">
                                                                        <i class="ace-icon fa fa-quote-left"></i>
                                                                        Lorem ipsum dolor sit amet, consectetur
                                                                        adipiscing elit. Quisque commodo massa sed ipsum
                                                                        porttitor facilisis …
                                                                    </div>
                                                                </div>

                                                                <div class="tools">
                                                                    <div class="action-buttons bigger-125">
                                                                        <a href="#">
                                                                            <i class="ace-icon fa fa-pencil blue"></i>
                                                                        </a>

                                                                        <a href="#">
                                                                            <i class="ace-icon fa fa-trash-o red"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="itemdiv commentdiv">
                                                                <div class="user">
                                                                    <img alt="Rita's Avatar"
                                                                         src="assets/images/avatars/avatar3.png">
                                                                </div>

                                                                <div class="body">
                                                                    <div class="name">
                                                                        <a href="#">Rita</a>
                                                                    </div>

                                                                    <div class="time">
                                                                        <i class="ace-icon fa fa-clock-o"></i>
                                                                        <span class="red">50 min</span>
                                                                    </div>

                                                                    <div class="text">
                                                                        <i class="ace-icon fa fa-quote-left"></i>
                                                                        Lorem ipsum dolor sit amet, consectetur
                                                                        adipiscing elit. Quisque commodo massa sed ipsum
                                                                        porttitor facilisis …
                                                                    </div>
                                                                </div>

                                                                <div class="tools">
                                                                    <div class="action-buttons bigger-125">
                                                                        <a href="#">
                                                                            <i class="ace-icon fa fa-pencil blue"></i>
                                                                        </a>

                                                                        <a href="#">
                                                                            <i class="ace-icon fa fa-trash-o red"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="hr hr8"></div>

                                                    <div class="center">
                                                        <i class="ace-icon fa fa-comments-o fa-2x green middle"></i>

                                                        &nbsp;
                                                        <a href="#" class="btn btn-sm btn-white btn-info">
                                                            See all comments &nbsp;
                                                            <i class="ace-icon fa fa-arrow-right"></i>
                                                        </a>
                                                    </div>

                                                    <div class="hr hr-double hr8"></div>
                                                </div>
                                            </div>
                                        </div><!-- /.widget-main -->
                                    </div><!-- /.widget-body -->
                                </div><!-- /.widget-box -->
                            </div><!-- /.col -->

                            <div class="col-sm-6">
                                <div class="widget-box">
                                    <div class="widget-header">
                                        <h4 class="widget-title lighter smaller">
                                            <i class="ace-icon fa fa-comment blue"></i>
                                            Conversation
                                        </h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main no-padding">
                                            <div class="dialogs ace-scroll">
                                                <div class="scroll-track scroll-active"
                                                     style="display: block; height: 300px;">
                                                    <div class="scroll-bar" style="height: 191px; top: 0px;"></div>
                                                </div>
                                                <div class="scroll-content" style="max-height: 300px;">
                                                    <div class="itemdiv dialogdiv">
                                                        <div class="user">
                                                            <img alt="Alexa's Avatar"
                                                                 src="assets/images/avatars/avatar1.png">
                                                        </div>

                                                        <div class="body">
                                                            <div class="time">
                                                                <i class="ace-icon fa fa-clock-o"></i>
                                                                <span class="green">4 sec</span>
                                                            </div>

                                                            <div class="name">
                                                                <a href="#">Alexa</a>
                                                            </div>
                                                            <div class="text">Lorem ipsum dolor sit amet, consectetur
                                                                adipiscing elit. Quisque commodo massa sed ipsum
                                                                porttitor facilisis.
                                                            </div>

                                                            <div class="tools">
                                                                <a href="#" class="btn btn-minier btn-info">
                                                                    <i class="icon-only ace-icon fa fa-share"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="itemdiv dialogdiv">
                                                        <div class="user">
                                                            <img alt="John's Avatar"
                                                                 src="assets/images/avatars/avatar.png">
                                                        </div>

                                                        <div class="body">
                                                            <div class="time">
                                                                <i class="ace-icon fa fa-clock-o"></i>
                                                                <span class="blue">38 sec</span>
                                                            </div>

                                                            <div class="name">
                                                                <a href="#">John</a>
                                                            </div>
                                                            <div class="text">Raw denim you probably haven't heard of
                                                                them jean shorts Austin.
                                                            </div>

                                                            <div class="tools">
                                                                <a href="#" class="btn btn-minier btn-info">
                                                                    <i class="icon-only ace-icon fa fa-share"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="itemdiv dialogdiv">
                                                        <div class="user">
                                                            <img alt="Bob's Avatar"
                                                                 src="assets/images/avatars/user.jpg">
                                                        </div>

                                                        <div class="body">
                                                            <div class="time">
                                                                <i class="ace-icon fa fa-clock-o"></i>
                                                                <span class="orange">2 min</span>
                                                            </div>

                                                            <div class="name">
                                                                <a href="#">Bob</a>
                                                                <span class="label label-info arrowed arrowed-in-right">admin</span>
                                                            </div>
                                                            <div class="text">Lorem ipsum dolor sit amet, consectetur
                                                                adipiscing elit. Quisque commodo massa sed ipsum
                                                                porttitor facilisis.
                                                            </div>

                                                            <div class="tools">
                                                                <a href="#" class="btn btn-minier btn-info">
                                                                    <i class="icon-only ace-icon fa fa-share"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="itemdiv dialogdiv">
                                                        <div class="user">
                                                            <img alt="Jim's Avatar"
                                                                 src="assets/images/avatars/avatar4.png">
                                                        </div>

                                                        <div class="body">
                                                            <div class="time">
                                                                <i class="ace-icon fa fa-clock-o"></i>
                                                                <span class="grey">3 min</span>
                                                            </div>

                                                            <div class="name">
                                                                <a href="#">Jim</a>
                                                            </div>
                                                            <div class="text">Raw denim you probably haven't heard of
                                                                them jean shorts Austin.
                                                            </div>

                                                            <div class="tools">
                                                                <a href="#" class="btn btn-minier btn-info">
                                                                    <i class="icon-only ace-icon fa fa-share"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="itemdiv dialogdiv">
                                                        <div class="user">
                                                            <img alt="Alexa's Avatar"
                                                                 src="assets/images/avatars/avatar1.png">
                                                        </div>

                                                        <div class="body">
                                                            <div class="time">
                                                                <i class="ace-icon fa fa-clock-o"></i>
                                                                <span class="green">4 min</span>
                                                            </div>

                                                            <div class="name">
                                                                <a href="#">Alexa</a>
                                                            </div>
                                                            <div class="text">Lorem ipsum dolor sit amet, consectetur
                                                                adipiscing elit.
                                                            </div>

                                                            <div class="tools">
                                                                <a href="#" class="btn btn-minier btn-info">
                                                                    <i class="icon-only ace-icon fa fa-share"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <form>
                                                <div class="form-actions">
                                                    <div class="input-group">
                                                        <input placeholder="Type your message here ..." type="text"
                                                               class="form-control" name="message">
                                                        <span class="input-group-btn">
																	<button class="btn btn-sm btn-info no-radius"
                                                                            type="button">
																		<i class="ace-icon fa fa-share"></i>
																		Send
																	</button>
																</span>
                                                    </div>
                                                </div>
                                            </form>
                                        </div><!-- /.widget-main -->
                                    </div><!-- /.widget-body -->
                                </div><!-- /.widget-box -->
                            </div><!-- /.col -->
                        </div><!-- /.row -->

                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->

    <div class="footer">
        <div class="footer-inner">
            <div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">Ace</span>
							Application © 2013-2014
						</span>

                &nbsp; &nbsp;
                <span class="action-buttons">
							<a href="#">
								<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
							</a>

							<a href="#">
								<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
							</a>

							<a href="#">
								<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
							</a>
						</span>
            </div>
        </div>
    </div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div>
